<template>
    <div id="Financial_Top">
        <div>
            <div>
                <!--        面包屑-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>手动充值记录</el-breadcrumb-item>
                </el-breadcrumb>
                <!--        面包屑 end-->
                <!--        内容-->
                <el-card>
                    <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                             class="admin_from">
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.touid" placeholder="请输入用户ID"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="1">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="search">查询</el-button>
                            <el-button type="primary" size="small" @click="add">添加</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="#">
                        </el-table-column>
                        <el-table-column
                                prop="created_at"
                                label="日期">
                        </el-table-column>
                        <el-table-column
                                prop="adminInfo.name"
                                label="操作人">
                        </el-table-column>
                        <el-table-column
                                :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'210':''"
                                prop="userInfo.nickname"
                                label="用户信息">
                            <template slot-scope="scope">
                                <div class="img">
                                    <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30">
                                    <div>
                                        <p>{{scope.row.userInfo.id}}</p>
                                        <p>{{scope.row.userInfo.nickname}}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="coin"
                                :label="'充值'+this.$store.state.name">
                        </el-table-column>
                    </el-table>
                    <div class="el-pagination">
                        <el-pagination
                                background
                                @size-change="changeSize"
                                @current-change="changeCurrent"
                                :current-page="params.pagenum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="params.pagesize"
                                :layout="this.$store.state.paginationLayout"
                                :total="params.totals">
                        </el-pagination>
                    </div>

                </el-card>
            </div>
            <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
                <el-form ref="form" label-width="80px" size="small">
                    <el-form-item label="用户id">
                        <el-input v-model="formData.user_id" @blur="blurClick"></el-input>
                    </el-form-item>
                    <el-form-item label="" v-if="blur_show">
                        <div class="title_list">
                            <p>
                                <el-avatar :src="userList.avatar"></el-avatar>
                            </p>
                            <div>
                                <p class="title-right">{{userList.id}}</p>
                                <p class="title-right">{{userList.nickname}}</p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item :label="'充值'+this.$store.state.name">
                        <el-input v-model="formData.coin"></el-input>
                        <p class="red">充值{{this.$store.state.name}}为负数时则为扣除当前余额</p>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Financial_Top",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                searchForm: {
                    touid: '',
                    start_time: '',
                    end_time: '',
                },
                tableData: [],
                fromTitle: '新增',
                visible: false,
                imageUrl: '',
                formData: {
                    coin: '',
                    user_id: '',
                },
                user_id: '',
                blur_show: false,
                userList: [],
            }
        },
        created() {
            this.getList()
        },
        methods: {
            blurClick() {
                console.log(11)
                if (this.formData.user_id.length >= 5) {
                    this.$axios.get('admin/user/' + this.formData.user_id, {}).then((res) => {
                        console.log(res)
                        this.userList = res.data
                        this.blur_show = true
                    });


                } else {
                    this.blur_show = false
                }
            },
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    touid: this.searchForm.touid,
                    start_time: this.searchForm.start_time,
                    end_time: this.searchForm.end_time,
                };
                this.$axios.post("admin/charge_admin/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            add() {
                this.formData = {
                    coin: '',
                    user_id: '',
                };
                this.visible = true;
            },
            dialogAffirm() {
                this.$axios.post("admin/charge_admin/set", this.formData).then((res) => {
                    this.$message.success("添加成功");
                    this.visible = false;
                    this.getList()
                });
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            }
        }
    }
</script>

<style scoped>
    .title_list {
        display: flex;
        align-items: center;
    }

    .title-right {
        font-size: 16px;
        margin-left: 10px;
    }

    .red {
        color: #F56C6C;
        opacity: .5;
    }
</style>